<template>
    <a-drawer popup-container="#wrap" width="100%" :footer="false" :visible="show" :ok-loading="form.loading"
        @cancel="show = false">
        <template #title>
            {{$t('components.acrea.60zecft3b2o0')}}
        </template>
        <div class="area">
            <div id="area"></div>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import {
    Scene,
    PointLayer
} from '@antv/l7';
import {
    GaodeMap
} from '@antv/l7-maps';
const show = defineModel('show', { default: false })
const list: any = defineModel('list', { default: [] })
const detail = defineModel('data', {
    default: {
        points: [],
        point: '',
        color: ''
    } as any,
})
const local = useLocal()
const emit = defineEmits(['refresh'])
const form = reactive({
    loading: false,
    uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
})
const scene = ref();
const mounted = ref(false)
const layer = ref()
const createLayer = () => {
    let arr = list.value?.map((item: any) => {
        let [lng, lat] = item.point?.split(',')
        return {
            lng: Number(lng),
            lat: Number(lat)
        }
    })
    layer.value = new PointLayer({
        zIndex: 10
    }).source(arr, {
        parser: {
            type: 'json',
            x: 'lng',
            y: 'lat',
        },
    }).shape('00')
        .size(40);
    scene.value.addLayer(layer.value);
}

const toCenter = () => {
    let [lng, lat] = detail.value?.point?.split(',')
    scene.value.panTo([lng, lat]);
}
(window as any)._AMapSecurityConfig = {
  securityJsCode: 'd84d8285ac6711fc36f6b313ab21372c'
}
const init = () => {
    let [lng, lat] = detail.value?.point?.split(',')
    scene.value = new Scene({
        id: 'area',
        map: new GaodeMap({
            center: [Number(lng), Number(lat)],
            zoom: 10,
            style: local.theme == 'light' ? 'normal' : local.theme,
            token: 'bd7d25df22d89905e5257e575709c2cc',
        }),
        logoVisible: false
    });
    scene.value.addImage(
        '00',
        '/fiveGADevice.svg',
    );
    scene.value.on('loaded', () => {
        createLayer()
    });
}
useWatch(show, (val: boolean) => {
    if (val) {
        if (!mounted.value) {
            mounted.value = true
            init()
        } else {
            toCenter()
        }
    } else {
        // scene.value?.removeLayer(layer.value)
    }
})
onBeforeUnmount(() => {
    scene.value?.destroy()
})
</script>

<style lang="less" scoped>
.area {
    width: 100%;
    height: 100%;

    #area {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
    }
}
</style>